import { motion } from 'framer-motion'
import styles from './style.module.scss'
import { containerVariants, itemVariants } from './config'
import { Button } from 'antd'
import { useState } from 'react'
import { CloseOutlined } from '@ant-design/icons'
export default function FramerMotion() {
	const [templates, setTemplates] = useState<string[]>([])
	const handleCreate = () => {
		setTemplates((prev) => [...prev, Date.now().toString()]) // 使用时间戳作为key
	}
	const handleDelete = (template: string) => {
		setTemplates((prev) => prev.filter((t) => t !== template))
	}
	return (
		<section className={styles.container}>
			<header>
				<Button onClick={handleCreate}>新建</Button>
			</header>
			<motion.div
				className={styles['template-container']}
				variants={containerVariants}
				animate="visible"
				initial="hidden">
				{templates.map((template) => (
					<motion.div
						key={template}
						variants={itemVariants}
						animate="visible"
						initial="hidden"
						layout>
						<div className={styles['template-item']}>
							<CloseOutlined onClick={() => handleDelete(template)} />
						</div>
					</motion.div>
				))}
			</motion.div>
		</section>
	)
}
